
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>测试</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/common/JxcpcsPage/vendor/bootstrap/css/bootstrap.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/common/JxcpcsPage/css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="/common/JxcpcsPage/jquery-labelauty.css">
    <link rel="stylesheet" href="/common/JxcpcsPage/css/custom.css">
    <style>
        input {
            font: 12px "Microsoft Yahei";
        }
        body{
            -webkit-print-color-adjust: exact;
        }
    </style>

</head>
<body>
<div class="page" style="padding: 15px;">
    <div class="container-fluid">
        <center>
            <h2>${yyxx.xssname}学习行为倾向测评报告</h2>
        </center>

        <hr />
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5>您的基本信息</h5>
                    </div>
                    <div class="card-body">
                        <c:forEach var="item" items="${khxz}">
                            <span class="badge badge-pill badge-success">${item.sname}</span>
                        </c:forEach>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5>您的"感觉-思考-行动-观察"类型</h5>
                    </div>
                    <div class="card-body">
                        <div id="GNSK" style="width: 100%;height: 350px;position:absolute; top:60px; left:-40%;"></div>
                        <div style="height: 350px;"></div>
                        <div style="text-align: left;margin-left: 10px;">
                            ${one.sname}
                            ${one.bz}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5>您的"视觉-听觉-动觉"类型</h5>
                    </div>
                    <div class="card-body">
                        <div id="SJTJ" style="width: 100%;height: 350px;position:absolute; top:60px; left:-40%;"></div>
                        <div style="height: 350px;"></div>
                        ${two.sname}
                        ${two.bz}
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 50px;padding-top: 50px;">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h5>您的心理与性格特征</h5>
                    </div>
                    <div class="card-body">
                        <c:forEach var="item" items="${jxcpcsAccessPageBean.dxlist_XLTZ}">
                            <div class="item d-flex align-items-center">
                                <div class="text">
                                    <span>${item.accessMsg}</span>
                                </div>
                            </div>

                        </c:forEach>
                        <div style="height: 640px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->

<script src="/common/JxcpcsPage/vendor/jquery/jquery.min.js"></script>
<script src="/common/JxcpcsPage/vendor/popper.js/umd/popper.min.js"> </script>
<script src="/common/JxcpcsPage/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Main File-->
<script src="/common/JxcpcsPage/jquery-labelauty.js"></script>
<script src="/common/echarts.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var GNSK = echarts.init(document.getElementById('GNSK'));
    var GNSK_json=${jxcpcsAccessPageBean.GNSK_JSON};
    var datas=[];
    var nums=[];
    var str="";
    for(var i=0;i<GNSK_json.length;i++){
        var data={
            name:GNSK_json[i].sname,
            max:6
        }
        var fzid="GNSK"+GNSK_json[i].fzid;
        var headId="headingOne"+i;
        str+="<div class=\"card\" style=\"margin-bottom: 0px;\">";
        str+="<div class=\"card-header\" role=\"tab\" id=\""+headId+"\">";
        str+="<h5 class=\"mb-0 mt-0 font-16\">";
        // str+="<input type=\"checkbox\" name=\"lx1\" value=\""+GNSK_json[i].fzid+"\" />";
        str+="<a data-toggle=\"collapse\" data-parent=\"#GNSK_MSG\" href=\"#"+fzid+"\" aria-expanded=\"false\" aria-controls=\"collapseOne\" class=\"text-dark collapsed\">";
        str+=GNSK_json[i].sname;
        str+="</a></h5></div>";

        str+="<div id=\""+fzid+"\" class=\"collapse\" role=\"tabpanel\" aria-labelledby=\""+headId+"\" style=\"\">";
        str+="<div class=\"card-body\">";
        str+=GNSK_json[i].bz;
        str+="</div></div></div>";


        // str+="<div class=\"statistic d-flex align-items-center bg-white has-shadow\">\n" +
        //     "                    <div class=\"icon bg-red\"><i class=\"fa fa-tasks\">"+GNSK_json[i].num+"</i></div>\n" +
        //     "                    <div class=\"text\"><small>"+GNSK_json[i].bz+"</small></div>\n" +
        //     "                </div>";

        nums.push(GNSK_json[i].num);
        datas.push(data);
        $('#GNSK_MSG').html(str);
    }
    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: datas
        },
        series: [{
            //name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : nums,
                    name : '客户倾向'
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    GNSK.setOption(option);




    var SJTJ = echarts.init(document.getElementById('SJTJ'));
    var SJTJ_json=${jxcpcsAccessPageBean.SJTJ_JSON};
    var datas_option_SJTJ=[];
    var nums_SJTJ=[];
    var str_SJTJ="";

    for(var i=0;i<SJTJ_json.length;i++){
        var data={
            name:SJTJ_json[i].sname,
            max:5
        }

        var fzid_SJTJ="SJTJ"+SJTJ_json[i].fzid;
        var headId_SJTJ="headingOne"+i;
        str_SJTJ+="<div class=\"card\" style=\"margin-bottom: 0px;\">";
        str_SJTJ+="<div class=\"card-header\" role=\"tab\" id=\""+headId_SJTJ+"\">";
        str_SJTJ+="<h5 class=\"mb-0 mt-0 font-16\">";
        // str_SJTJ+="<input type=\"checkbox\" name=\"lx2\" value=\""+SJTJ_json[i].fzid+"\" />";
        str_SJTJ+="<a data-toggle=\"collapse\" data-parent=\"#GNSK_MSG\" href=\"#"+fzid_SJTJ+"\" aria-expanded=\"false\" aria-controls=\"collapseOne\" class=\"text-dark collapsed\">";
        str_SJTJ+=SJTJ_json[i].sname;
        str_SJTJ+="</a></h5></div>";

        str_SJTJ+="<div id=\""+fzid_SJTJ+"\" class=\"collapse\" role=\"tabpanel\" aria-labelledby=\""+headId_SJTJ+"\" style=\"\">";
        str_SJTJ+="<div class=\"card-body\">";
        str_SJTJ+=SJTJ_json[i].bz;
        str_SJTJ+="</div></div></div>";


        // str_SJTJ+="<div class=\"statistic d-flex align-items-center bg-white has-shadow\">\n" +
        //     "                    <div class=\"icon bg-red\"><i class=\"fa fa-tasks\">"+SJTJ_json[i].num+"</i></div>\n" +
        //     "                    <div class=\"text\"><small>"+SJTJ_json[i].bz+"</small></div>\n" +
        //     "                </div>";

        nums_SJTJ.push(SJTJ_json[i].num);
        datas_option_SJTJ.push(data);
        $('#SJTJ_MSG').html(str_SJTJ);
    }
    // 指定图表的配置项和数据
    var option_SJTJ = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: datas_option_SJTJ
        },
        series: [{
            //name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : nums_SJTJ,
                    name : '客户倾向'
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    SJTJ.setOption(option_SJTJ);

    $('#savePrint').click(function(){
        var lx1 = $("input[name='lx1']:checked");
        var lx2 = $("input[name='lx2']:checked");
        var xgtz = $("input[name='xgtz']:checked");
        $.ajax({
            type: "POST",
            data:{
                id:'${yycpbg.id}',
                printlx1:getList(lx1).join(','),
                printlx2:getList(lx2).join(','),
                printlx3:getList(xgtz).join(',')
            },
            url: "/com/imelite/qyh/YycpbgAction/insert.do",
            success: function(result) {
                if ( result.code == 200 ) {
                    alert("感谢您完成测评，请您联系我们的前提人员为您进行下一步的安排,谢谢");
                    $('#f2').submit();
                } else {
                    alert(result.msg);
                }
            },
            error:function(data){
                alert("系统异常！");
            }
        });
        alert(getList(lx2));
        alert(getList(xgtz));

    });

    function getList(boxes){
        var idlist=[];
        for(var i=0;i<boxes.length;i++){
            idlist.push(boxes[i].value);
        }
        return idlist;
    }
</script>
</body>
